<template>
  <div class="videoContent">
    <div id="container" ref="containerRef"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted, computed, watch } from "vue";
const containerRef = ref(null);

defineOptions({ name: "ForecastPlan" });

const props = defineProps({
  videoUrl: { type: String },
});

watch(
  () => props.videoUrl,
  () => {
    play(props.videoUrl);
  }
);

const state = reactive({
  jessibuca: null,
});

onMounted(() => {
  initVideo();

  window.setTimeout(() => {
    play(props.videoUrl);
  }, 200);
});

const initVideo = (options = {}) => {
  let jessibuca = new window.Jessibuca(
    Object.assign(
      {
        container: containerRef.value,
        videoBuffer: 1, // 缓存时长
        isResize: true,
        useWCS: false,
        useMSE: false,
        text: "",
        // background: "bg.jpg",
        loadingText: "疯狂加载中...",
        // hasAudio:false,
        debug: false,
        supportDblclickFullscreen: true,
        showBandwidth: false, // 显示网速
        controlAutoHide: true,
        wasmDecodeErrorReplay: true,
        operateBtns: {
          fullscreen: true,
          screenshot: true,
          play: true,
          audio: true,
        },
        isNotMute: false,
      },
      options
    )
  );
  state.jessibuca = jessibuca;
};

const play = (url) => {
  // let url = "http://202.96.98.106:30000/rtp/061476B1.live.flv";
  state.jessibuca.play(url);
};

onUnmounted(async () => {
  if (state.jessibuca) {
    await state.jessibuca.destroy();
    state.jessibuca = null;
  }
});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.videoContent {
  width: 100%;
  height: 100%;
  min-height: 200px;
  #container {
    width: 100%;
    height: 100%;
  }
}
</style>
